<template>
  <div class="mod-config">
    <basic-container>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item label="视频名称：">
          <el-input v-model="searchForm.videoName" placeholder="视频名称"></el-input>
        </el-form-item>
        <el-form-item label="设备位置：">
          <el-input v-model="searchForm.codeLocation" placeholder="设备位置"></el-input>
        </el-form-item>
        <el-form-item label="设备类型：">
          <el-input v-model="searchForm.codeType" placeholder="设备类型"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-if="permissions.hik_video_add" icon="el-icon-plus" type="primary"
            @click="addOrUpdateHandle()">新增</el-button>
          <el-button v-if="permissions.hik_video_export" icon="el-icon-download" type="primary" plain
            @click="exportExcel()">导出</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDataList()" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="clean()" icon="el-icon-search">重置</el-button>
        </el-form-item>
      </el-form>

      <!--视频监控-->
      <div class="avue-crud">
        <video style="width: 800px;height: 400px;" controls="controls"></video>


      </div>
      <!--云台控制-->
      <div class="demo-image__lazy">
        <img src="../../../img/ytkz.jpg"
          style="width: 400px;height: 400px;position:relative;top: -404px;margin-left: 54%;" />
      </div>
      <div style="margin-left: 84%;position: relative;top: -819px">
        <p><el-button>左上</el-button><el-button>上</el-button><el-button>右上</el-button></p>
        <p style="margin-left: 5px;"><el-button>左</el-button><el-button>自动</el-button><el-button>右</el-button></p>
        <p><el-button>左下</el-button><el-button>下</el-button><el-button>右下</el-button></p>
        <p><el-button>变倍+</el-button><el-button>变倍-</el-button></p>
        <p><el-button>变焦+</el-button><el-button>变焦-</el-button></p>
        <p><el-button>变焦+</el-button><el-button>变焦-</el-button></p>
        <p><el-button>云台速度</el-button><el-input style="position: absolute;width: 100px;" v-model="input1"
            placeholder="请输入速度"></el-input></p>
        <p><el-button>预置点号</el-button><el-input style="position: absolute;width: 100px;" v-model="input2"
            placeholder="请输入点号"></el-input></p>
        <p><el-button>设置</el-button><el-button>调用</el-button></p>
      </div>
      <div class="avue-crud">
        <el-table style="top:-800px;" :data="dataList" border v-loading="dataListLoading">
          <el-table-column prop="videoId" header-align="center" align="center" label="视频id">
          </el-table-column>
          <el-table-column prop="videoName" header-align="center" align="center" label="视频名称">
          </el-table-column>
          <el-table-column prop="ipAddress" header-align="center" align="center" label="IP地址">
          </el-table-column>
          <el-table-column prop="username" header-align="center" align="center" label="用户名">
          </el-table-column>
          <el-table-column prop="password" header-align="center" align="center" label="密码">
          </el-table-column>
          <el-table-column prop="portNumber" header-align="center" align="center" label="端口号">
          </el-table-column>
          <el-table-column prop="encodingMethod" header-align="center" align="center" label="编码方式">
          </el-table-column>
          <el-table-column prop="codeRate" header-align="center" align="center" label="码率">
          </el-table-column>
          <el-table-column prop="codeLocation" header-align="center" align="center" label="设备位置">
          </el-table-column>
          <el-table-column prop="realTimeVideo" header-align="center" align="center" label="实时视频">
          </el-table-column>
          <el-table-column prop="createTime" header-align="center" align="center" label="创建时间">
          </el-table-column>
          <el-table-column prop="updateTime" header-align="center" align="center" label="更新时间">
          </el-table-column>
          <!-- <el-table-column
                    prop="delFlag"
                    header-align="center"
                    align="center"
                    label="0正常 其余删除">
            </el-table-column> -->
          <el-table-column prop="codeType" header-align="center" align="center" label="设备类型">
          </el-table-column>
          <el-table-column header-align="center" align="center" label="操作">
            <template slot-scope="scope">
              <el-button v-if="permissions.hik_video_edit" type="text" size="small" icon="el-icon-edit"
                @click="addOrUpdateHandle(scope.row.videoId)">修改</el-button>
              <el-button v-if="permissions.hik_video_del" type="text" size="small" icon="el-icon-delete"
                @click="deleteHandle(scope.row.videoId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
    </basic-container>
  </div>
</template>

<script>
import { fetchList, delObj } from '@/api/hik/video'
import TableForm from './video-form'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      dataForm: {
        key: ''
      },
      input1: '',
      input2: '',
      searchForm: {},
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false
    }
  },
  components: {
    TableForm
  },
  created() {
    this.getDataList()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.searchForm
      )).then(response => {
        this.dataList = response.data.data.records
        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      this.$confirm('是否确认删除ID为' + id, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return delObj(id)
      }).then(data => {
        this.$message.success('删除成功')
        this.getDataList()
      })
    },
    //  导出excel
    exportExcel() {
      this.downBlobFile('/hik/video/export', this.searchForm, '视频监控.xlsx')
    },
    clean() {
      this.searchForm = {}
      this.dateList = []
    }
  },

  //云台控制方法



}
</script>

